<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="__PUBLIC__/Css/Admin/Bootstrap/bootstrap.min.css" rel="stylesheet"  >
<link href="__PUBLIC__/Js/jqui/jquery-ui.min.css" rel="stylesheet"  >
<script src='__PUBLIC__/Js/jquery-3.1.0.min.js'></script>
<script src='__PUBLIC__/Js/jqPaginator.js'></script>
<script src='__PUBLIC__/Js/jqui/jquery-ui.min.js'></script>

<style>
	#dialog-confirm,#dialog-confirm2,#msg{		
			display:none;
		}
		#msg{
			position:absolute;
			margin-left:500px;
			margin-top:-28px;
		}
</style>
</head>
<body> 
<div id="dialog-confirm" >
	     <h3>商品属性修改</h3>
			<p>商品名:<span id='goods_name'></span></p>
			<p>属性项:<select name="attr" id="attr">
								<volist name='attrs' id='vo'>
									<option value='<{$vo.id}>'><{$vo.type_name}>-><{$vo.attr_name}></option>
								</volist>		
							 </select></p>
			<p>属性值:<input type="text" name='att_val' /></p>
			
</div>
<div id="dialog-confirm2" >
	     <h3>商品属性添加</h3>
			
			<p>商品名<select name="type" id="type">
								<volist name='goods' id='vo'>
									<option value='<{$vo.id}>'><{$vo.goods_name}></option>
								</volist>		
							 </select></p>
			<p>属性项<select name="attr2" id="attr2">
								<volist name='attrs' id='vo'>
									<option value='<{$vo.id}>'><{$vo.type_name}>-><{$vo.attr_name}></option>
								</volist>		
							 </select></p>
			<p>属性值<input type="text" name='att_val2'/></p>				 
			
</div>		
<table class='table table-bordered'>   
	     
</table>
   <ul class="pagination" id="pagination"></ul>
<script>
	$(function(){
		 $.jqPaginator("#pagination",{
            totalPages: <{$pagetotal}>,
            visiblePages: <{$pagetotal}>,
            currentPage: 1,
            first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"></i>上一页</a></li>',
            next: '<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"></i></a></li>',
            last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
            onPageChange: function (num,type) {
              var  html=" <thead><tr><th colspan='5'>当前位置:商品管理>>商品属性列表</th></tr><tr><td colspan='5'><button type='button' name='but_add' class='btn btn-primary'>添加</button><div id='msg'class='btn btn-warning' >&nbsp;</div></td></tr><tr><th>ID</th><th>商品"
				  +"</th><th>属性项</th><th>属性值</th><th>操作</th></tr></thead>";	 	
			$.get("<{:U('dogoods_attr')}>",{p:num},function(data){
				$(data).map(function(k,v){
					html+="<tbody><tr id=goods_"+v.id+"><td>"+v.id+"</td><td>"+v.goods_name+"</td><td>"+v.type_name+"->"+v.attr_name
					+"</td><td>"+v.attr_val+"</td><td><button type='button'data-id="+v.id+" name='but_edit' class='btn btn-success'>编辑</button>&nbsp;<button type='button' data-id="+v.id+" name='but_del' class='btn btn-danger'>删除</button></td></tr></tbody>";	 
					$('table').html(html);				
				});
			},'json');    
            }
        });
		//添加
			$(document).on('click','[name=but_add]',function(){
				$("#dialog-confirm2").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'添加确认',
		      buttons: {
		        "确认": function() {	
				var goodsid=$("#type :selected").val();
				var attrid=	$("#attr2 :selected").val();
				var attr=	$("[name=att_val2]").val();	
        	$.get("<{:U('dogoodsattradd')}>",{goods_id:goodsid,attr_id:attrid,attr_val:attr},function(data){
					if(data.status==1){
							location.reload();				  
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						    
						}else{
							$('#msg').text(data.msg)
							$('#msg').css('display','block');;
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
				$( this ).dialog( "close" );        
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });			
		})
		//编辑
		$(document).on('click','[name=but_edit]',function(){
			var id=$(this).attr('data-id');
			 $.get("<{:U('goodsattredit')}>",{id:id},function(data){
					$("#goods_name").text(data.goods_name);
					$('#attr option[value='+data.attr_id+']').attr('selected','selected');
					$("[name='att_val']").val(data.attr_val);
				},'json');
			$("#dialog-confirm").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'修改确认',
		      buttons: {
		        "确认": function() {
		     	var attrid=	$("#attr :selected").val();
				var attr=	$("[name=att_val]").val();	
			  	$.get("<{:U('dogoodsattredit')}>",{id:id,attr_id:attrid,attr_val:attr},function(data){
					if(data.status==1){	
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
							//点击修改后要将原来的数据替换
							$("#goods_"+id+" :eq(2)").text(data.attr.type_name+"->"+data.attr.attr_name);
							$("#goods_"+id+" :eq(3)").text(data.attr.attr_val);
							setTimeout(function(){$('#msg').fadeOut('slow');},2000);
						}else{
					
							$('#msg').text(data.msg);
							$('#msg').css('display','block');
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
			
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });
		  });
  //删除
	$(document).on('click','[name=but_del]',function(){	
	    var id=$(this).attr('data-id');
		$( "<div>删除后不可恢复！确定要删除？</div>" ).dialog({
	     title:'删除确认',
		 modal: true,
	      buttons: {
	        "确定": function() {
				$(this ).dialog( "close" ); 
			$.get('<{:U("dogoodsattrdel")}>',{id:id},function(data){
					if(data.status==1){
					   $("#goods_"+id).remove();
						$('#msg').text(data.msg)
						$('#msg').css('display','block');;	
						setTimeout(function(){$('#msg').fadeOut('slow')},1000);
                        location.reload();		
					}else{			
						$('#msg').text(data.msg);
						$('#msg').css('display','block');
					setTimeout(function(){$('#msg').fadeOut('slow');},1000);		
					}
				},'json');	
	        },
	        "取消": function() {
	          $( this ).dialog( "close" );
	        }
	      }
	    });
	    });	
	});

</script>

</body>
</html>	
